<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button class="btn-class"
            @click="toastShow('info','默认显示')">显示 info toast</button>
    <button class="btn-class"
            @click="toastShow('success','成功了')">显示 success toast</button>
    <button class="btn-class"
            @click="toastShow('error','失败了')">显示 error toast</button>
    <button class="btn-class"
            @click="toastShow('warning','警告')">显示 warning toast</button>
    <button class="btn-class"
            @click="toastShow('noIcon')">无图标 toast</button>
    <button class="btn-class"
            @click="toastShow('loading')">loading</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted () {

  },
  methods: {
    toastShow (type, msg) {
      if (type == 'loading') {
        this.$mToast.loading();
        setTimeout(() => {
          this.$mToast.close();
        }, 2000)
        return;
      }
      if (type == 'noIcon') {
        this.$mToast({
          isIcon: false,
          msg: '无图标'
        })
        return;
      }
      this.$mToast({
        type: type,
        msg,
        duration: 1500,
        onClose () {
          console.log('message fn')
        }
      })
      console.log(this.$mToast)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.btn-class {
  margin: 10px 15px;
}
</style>
